<!--
 * @Description:
 * @Version: 1.0
 * @Autor: yel
 * @Date: 2022-03-10 11:30:40
 * @LastEditors: yel
 * @LastEditTime: 2022-03-11 10:59:29
-->

<template>
    <div class="echart-pie-wrap">
        <pie-chart
            :series-data="dataList"
            :extra-option="extraOption"
        ></pie-chart>
    </div>
</template>

<script>
import PieChart from "@/components/Chart/PieChart/PieChart.vue";
export default {
    components: {
        PieChart,
    },
    data() {
        return {
            dataList: [
                {
                    name: "西瓜",
                    value: 20,
                },
                {
                    name: "橘子",
                    value: 13,
                },
                {
                    name: "杨桃",
                    value: 33,
                },
            ],
            extraOption: {
                color: ["#fe883a", "#2d90d1", "#f75981", "#90e2a9"],
                grid: {
                    top: this.fitChartSize(30),
                    right: this.fitChartSize(10),
                    left: this.fitChartSize(20),
                    bottom: this.fitChartSize(20), //间距自适应
                },
                textStyle: {
                    color: "green",
                    fontSize: this.fitChartSize(10), //字体自适应
                },
            },
        };
    },
};
</script>

<style lang="scss">
.echart-pie-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: vw(300);
    height: vh(300);
    margin: 1vw auto;
}
</style>
